import Menu from 'ant-design-vue/es/menu'
import Icon from 'ant-design-vue/es/icon'

const {
	Item,
	SubMenu
} = Menu

export default {
	name: 'SMenu',
	props: {
		menu: {
			type: Array,
			required: true
		},
		theme: {
			type: String,
			required: false,
			default: 'dark'
		},
		mode: {
			type: String,
			required: false,
			default: 'inline'
		},
		collapsed: {
			type: Boolean,
			required: false,
			default: false
		}
	},
	data() {
		return {
			openKeys: [],
			selectedKeys: [],
			cachedOpenKeys: []
		}
	},
	computed: {
		rootSubmenuKeys: (vm) => {
			let keys = []
			vm.menu.forEach(item => keys.push(item.path))
			return keys
		}
	},
	created() {
		this.updateMenu()
	},
	watch: {
		collapsed(val) {
			if (val) {
				this.cachedOpenKeys = this.openKeys
				this.openKeys = []
			} else {
				this.openKeys = this.cachedOpenKeys
			}
		},
		'$route': function() {
			this.updateMenu()
		}
	},
	methods: {
		/* renderIcon: function (h, icon) {			
		  return icon === 'none' || icon === undefined ? null
		    : h(Icon, { props: { type: icon !== undefined ? icon : '' } })		 
		}, */
		renderIcon: function(h, icon) {
			if (icon === 'none' || icon === undefined) {
				return null
			}
			const props = {}
			typeof(icon) === 'object' ? props.component = icon: props.type = icon
			// return h(Icon, { props: { ...props } })
			return h('i', {
				class: 'material-icons icon iconfont'
			}, [icon])
		},
		renderMenuItem: function(h, menu, pIndex, index) {
			//console.log("实话实说"+JSON.stringify(menu))
			return h(Item, {
					key: menu.path ? menu.path : 'item_' + pIndex + '_' + index
				},
				[
					h(
						'router-link', {
							attrs: {
								to: {
									name: menu.name
								}
							}
						},
						[
							this.renderIcon(h, menu.meta.icon),
							h('span', [menu.meta.title])
						]
					)
				]
			)
		},
		renderSubMenu: function(h, menu, pIndex, index) {
			const this2_ = this;
			let subItem = [h('span', {
					slot: 'title'
				},
				[
					this.renderIcon(h, menu.meta.icon),
					h('span', [menu.meta.title])
				]
			)]
			let itemArr = []
			let pIndex_ = pIndex + '_' + index
			if (!menu.alwaysShow) {
				menu.children.forEach(function(item, i) {
					itemArr.push(this2_.renderItem(h, item, pIndex_, i))
				})
			}
			return h(
				SubMenu, {
					key: menu.path ? menu.path : 'submenu_' + pIndex + '_' + index
				},
				subItem.concat(itemArr)
			)
		},
		renderItem: function(h, menu, pIndex, index) {
			if (!menu.hidden) {
				return menu.children && !menu.alwaysShow ? this.renderSubMenu(h, menu, pIndex, index) : this.renderMenuItem(h,
					menu, pIndex, index)
			}
		},
		renderMenu: function(h, menuTree) {
			
			const this2_ = this
			let menuArr = []
			menuTree.forEach(function(menu, i) {
				if (!menu.hidden) {
					console.log('menuTree',menu)
					menuArr.push(this2_.renderItem(h, menu, '0', i))
				}
			})
			return menuArr
		},
		onOpenChange(openKeys) {
			const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
			if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
				this.openKeys = openKeys
			} else {
				this.openKeys = latestOpenKey ? [latestOpenKey] : []
			}
		},
		updateMenu() {

			let routes = this.$route.matched.concat()
			//let routes=this.$router.options.routes
			//let routes=this.$router.options.routes;

			if (routes.length >= 3 && this.$route.meta.hidden) {
				routes.pop()
				this.selectedKeys = [routes[1].path]
			} else if (routes.length > 0) {

				//console.log("双手合十"+JSON.stringify(routes.length))
				//this.selectedKeys = [ routes[0].path ]
				this.selectedKeys = [routes.pop().path]
			}
			let openKeys = []
			routes.forEach((item) => {
				openKeys.push(item.path)
			})
			this.collapsed ? this.cachedOpenKeys = openKeys : this.openKeys = openKeys
		}
	},
	render(h) {
		return h(
			Menu, {
				props: {
					theme: this.$props.theme,
					mode: this.$props.mode,
					inlineCollapsed: false,
					openKeys: this.openKeys,
					selectedKeys: this.selectedKeys
				},
				on: {
					openChange: this.onOpenChange,
					select: (obj) => {
						this.selectedKeys = obj.selectedKeys
						this.$emit('select', obj)
					}
				}
			}, this.renderMenu(h, this.menu)
		)
	}
}
